import React from 'react'
import { Outlet, Link, useLocation } from 'react-router-dom'
import { BookOpen, Calendar, Heart, User, ShoppingCart, Search } from 'lucide-react'
import { cn } from '../utils/cn'
import { useStore } from '../stores/appStore'

const Layout: React.FC = () => {
  const location = useLocation()
  const { user } = useStore()

  const navItems = [
    { path: '/', icon: BookOpen, label: '首页' },
    { path: '/books', icon: BookOpen, label: '绘本馆' },
    { path: '/activities', icon: Calendar, label: '活动' },
    { path: '/reading', icon: Heart, label: '阅读记录' },
    { path: '/profile', icon: User, label: '我的' },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-cream-50 to-sky-50">
      {/* 顶部导航栏 */}
      <header className="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b-2 border-primary-100 shadow-sm">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            {/* Logo */}
            <Link to="/" className="flex items-center space-x-2">
              <div className="w-10 h-10 bg-gradient-to-br from-primary-400 to-primary-600 rounded-2xl flex items-center justify-center shadow-lg">
                <BookOpen className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-primary-700">绘本岛</h1>
                <p className="text-xs text-primary-500">HuibenDAO</p>
              </div>
            </Link>

            {/* 搜索栏 */}
            <div className="flex-1 max-w-md mx-8">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="搜索绘本、作者或主题..."
                  className="w-full pl-10 pr-4 py-2 rounded-full border-2 border-primary-100 focus:border-primary-300 focus:outline-none bg-cream-50 transition-colors"
                />
              </div>
            </div>

            {/* 用户区域 */}
            <div className="flex items-center space-x-4">
              <Link to="/cart" className="relative p-2 rounded-full hover:bg-primary-50 transition-colors">
                <ShoppingCart className="w-6 h-6 text-primary-600" />
                <span className="absolute -top-1 -right-1 w-5 h-5 bg-primary-500 text-white text-xs rounded-full flex items-center justify-center">
                  0
                </span>
              </Link>
              {user ? (
                <div className="flex items-center space-x-2">
                  <img
                    src={user.avatar || "https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20cartoon%20parent%20avatar%20with%20warm%20colors%20and%20friendly%20smile&image_size=square"}
                    alt={user.name}
                    className="w-8 h-8 rounded-full border-2 border-primary-200"
                  />
                  <span className="text-sm font-medium text-gray-700">{user.name}</span>
                </div>
              ) : (
                <Link
                  to="/login"
                  className="px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-full hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-md hover:shadow-lg"
                >
                  登录
                </Link>
              )}
            </div>
          </div>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className="container mx-auto px-4 py-6 min-h-[calc(100vh-140px)]">
        <Outlet />
      </main>

      {/* 底部导航栏 */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-t-2 border-primary-100 shadow-lg">
        <div className="container mx-auto px-4">
          <div className="flex justify-around py-3">
            {navItems.map((item) => {
              const isActive = location.pathname === item.path
              return (
                <Link
                  key={item.path}
                  to={item.path}
                  className={cn(
                    "flex flex-col items-center space-y-1 px-3 py-2 rounded-xl transition-all duration-200",
                    isActive 
                      ? "text-primary-600 bg-primary-50 scale-105" 
                      : "text-gray-500 hover:text-primary-500 hover:bg-primary-25"
                  )}
                >
                  <item.icon className={cn("w-6 h-6", isActive && "animate-pulse-slow")} />
                  <span className="text-xs font-medium">{item.label}</span>
                </Link>
              )
            })}
          </div>
        </div>
      </nav>

      {/* 底部占位空间 */}
      <div className="h-20"></div>
    </div>
  )
}

export default Layout